<template>

  <van-tabbar v-model="active" active-color="#ff5f16" inactive-color="#797d82" @change="onChange">
    <van-tabbar-item icon="live" to="/films/nowPlaying">电影</van-tabbar-item>
    <van-tabbar-item icon="shop" to="/cinemas">影院</van-tabbar-item>
    <van-tabbar-item icon="comment-o" url="https://m.maizuo.com/mz-act/active/ElzMZU125260">资讯</van-tabbar-item>
    <van-tabbar-item icon="contact" to="/center">我的</van-tabbar-item>
  </van-tabbar>
</template>


<script>

// import { Notify } from 'vant';
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);

export default {
  data() {
    return {
      active: 0,
      url:["/films/nowPlaying","/cinemas","/news","/center"]
    };
  },
  methods: {
    onChange(index) {
      this.$router.push(this.url[index]);
    },
  },
  created(){
    let path = this.$route.path;
     this.active = path === "/films/comingSoon" ? 0 : this.url.indexOf(path);
  }
};
</script>




<style lang="scss" scoped>
</style>